<template>
  <div class="lazy-img-view">
    <!-- <img
      :src="require('../../../assets/lazyImg/apple.jpg')"
      class="lazyload-img"
      data-url="../../../assets/lazyImg/apple.jpg"
    /> -->
    <img
      :src="require('../../../assets/timg.gif')"
      class="lazyload-img"
      data-url="assets/lazyImg/apple.jpg"
    />
    <img
      :src="require('../../../assets/timg.gif')"
      class="lazyload-img"
      data-url="assets/lazyImg/durian.jpg"
    />
    <img
      :src="require('../../../assets/timg.gif')"
      class="lazyload-img"
      data-url="assets/lazyImg/lanmei.jpg"
    />
    <img
      :src="require('../../../assets/timg.gif')"
      class="lazyload-img"
      data-url="assets/lazyImg/lirui.jpg"
    />
    <img
      :src="require('../../../assets/timg.gif')"
      class="lazyload-img"
      data-url="assets/lazyImg/phone.jpg"
    />
    <img
      :src="require('../../../assets/timg.gif')"
      class="lazyload-img"
      data-url="assets/lazyImg/rui.jpg"
    />
    <img
      :src="require('../../../assets/timg.gif')"
      class="lazyload-img"
      data-url="assets/lazyImg/share.png"
    />
  </div>
</template>

<script>
export default {
  computed: {},
  data() {
    return {
      viewport: null,
      imgArr: [],
      timer: null,
    };
  },
  created() {},
  mounted() {
    let viewport = document.getElementsByClassName("lazy-img-view")[0];
    // let imgArr = [...document.querySelectorAll(".lazyload-img")]
    this.viewport = viewport;
    let imgArr = [].slice.call(document.querySelectorAll(".lazyload-img"));
    this.imgArr = imgArr;
    viewport.addEventListener("scroll", this.bindHandleScroll);
    this.lazyloadImg();
  },
  methods: {
    // 该函数用来判断某一个元素是否在可视区域
    isVisible(element) {
      let viewport = this.viewport;
      let rect = element.getBoundingClientRect();
      // 用户不管是从上向下、从下向上、从左向右、从右向左滑动，都可以判断当前元素是否在可视区域
      console.log(rect, viewport.clientHeight, "===element");
      return (
        rect.top < viewport.clientHeight &&
        rect.bottom > 0 &&
        rect.left < viewport.clientWidth &&
        rect.right > 0
      );
    },

    // 该函数动态设置图片的src属性，动态加载图片
    lazyloadImg() {
      let imgArr = this.imgArr;
      for (let i = 0; i < imgArr.length; i++) {
        let img = imgArr[i];
        if (this.isVisible(img)) {
          let src = img.getAttribute("data-url");
          img.src = require("@/" + src);
          imgArr.splice(i, 1);
          i--;
        }
      }
    },

    bindHandleScroll() {
      if (this.timer) clearTimeout(this.timer);
      this.timer = setTimeout(() => {
        // 页面滚动的时候，不断有新的图片进入可视区域，此时再调用lazyloadImg函数
        this.lazyloadImg();
      }, 100);
    },
  },
};
</script>
<style lang="scss" scoped>
.lazy-img-view {
  height: 100%;
  overflow: auto;
  .lazyload-img {
    display: block;
    width: 80%;
    margin: 60px auto;
  }
}
</style>